<template>
    <div class="enroll_cent">
        <solid-window class="window" :msg="this.enrollwarnmsg.popwarn" ref="child"></solid-window>

        <div class="enroll_inputmsg">
            <!--          邮箱输入的div容器-->
            <div>
                <div class="enroll_QQ changeline">
                    <label>账号名</label>
                    <!--                  竖线-->

                    <input class="input1"
                           type="text"
                           v-model="enrollmsg.user"
                           placeholder="账户唯一，可以用来登录"
                           @focus.stop="showwarnmsg('enroll_QQ_warn',true,flagec)"
                           @blur.stop="showwarnmsg('enroll_QQ_warn',false,flagec)"
                           @input.stop="checkenrollmsg('enroll_QQ_warn')"
                    >
                </div>
                <!--              格式错误的提示-->
                <span class="enroll_QQ_warn">
                      <i class="enroll_img_w"></i>
                      {{this.userwarnmsg}}
                  </span>
            </div>

            <!--          验证码的div容器-->
            <div>
                <div class="enroll_code changeline">
                    <label>设置密码</label>

                    <input  class="input2"
                            type="text"
                            v-model="enrollmsg.userpwd"
                            placeholder="建议两张或两种以上的字符组合"
                            @focus.stop="showwarnmsg('enroll_code_warn',true,flageu)"
                            @blur.stop="showwarnmsg('enroll_code_warn',false,flageu)"
                            @input.stop="checkenrollmsg('enroll_code_warn')"
                    >
                    <i class="enroll_img_i"></i>
                </div>
                <span class="enroll_code_warn">
                       <i class="enroll_img_w"></i>
                      {{this.pwdwarnmsg}}
                </span>
            </div>

            <div>
                <div class="enroll_code changeline">
                    <label>确认密码</label>

                    <input  class="input3"
                            type="text"
                            v-model="enrollmsg.execpwd"
                            placeholder="再次输入密码"
                            @focus.stop="showwarnmsg('enroll_exec_warn',true,flagee)"
                            @blur.stop="showwarnmsg('enroll_exec_warn',false,flagee)"
                            @input.stop="checkenrollmsg('enroll_exec_warn')"
                    >
                    <i class="enroll_img_i"></i>
                </div>
                <span class="enroll_exec_warn">
                       <i class="enroll_img_w"></i>
                      {{this.execpwdwarnmsg}}
                </span>
            </div>
            <!--          提交按钮的容器-->
            <div class="clearfix">
                <div class="enroll_subimt">
                    <input @click="mailgetcode()"  type="submit" >
                </div>
                <a class="reg-other-person" href="/#/enrollview/cmail">
                    <i class="reg-ohter-icon"></i>
                    企业用户注册
                </a>
            </div>
        </div>
    </div>
</template>

<script>
import { encryptDes } from '@/utill/des'
import SolidWindow from "@/components/sub/SolidWindow.vue";
export default {
    name: "MsgEnroll",
    components: {SolidWindow},
    // 支持中文、英文、数字、“-”、“_”的组合，4-20个字符
    data(){
        return{
            enrollmsg:{
                user:'',
                userpwd:'',
                execpwd:''
            },
            user:{
                name:'',
                email:'',
                password:'',
                utype:0,
            },
            enrollwarnmsg:{
                userwarn:'支持中文、英文、数字、“-”、“_”的组合',
                pwdwarn:'建议使用字母、数字和符号两种及以上的组合，8-20个字符',
                execpwdwarn:'请再次输入密码',
                popwarn:'登录失败'
            },

            flage:false,
            // 检查账号名
            flagec:false,
            // 检查密码
            flageu:false,
            // 检查确认密码是否正确
            flagee:false,
            //循环红路灯
            flaged:true,
        }
    },
    methods: {
        test(){
            alert("测试用例")
        },
        warnwindow(msg,warn){
            // document.getElementById(msg).disabled=true;
            this.enrollwarnmsg.popwarn=warn;
            this.$refs.child.Scribblewindow();
            // document.getElementById(msg).disabled=false;
        },
        showwarns(){
            console.log("回归函数");
            let offeng=60;
            let offstart=-40;
            let warns=document.querySelector('.el-message--error');
            const intervalId= setInterval(function refer() {
                if (offeng<=offstart){
                    clearInterval(intervalId)
                }
                offeng-=1;
                warns.style.top=offeng+'px';
            }, 12)

        },
//提交的按钮
        async mailgetcode() {
            // 将获得的验证码和填入的进行比较对的话进行下一步错去的的显示
            if(this.flagec==true&&this.flageu==true&&this.flagee==true){

                {
                    this.user.name=this.enrollmsg.user;
                    this.user.password=this.enrollmsg.userpwd;
                    this.user.email
                }

                let res = await this.$http.post("enroll",this.user);

                if(res.code==200){

                    // 成功的话讲获取到额验证码保存到execode中去
                    this.$store.commit("sendtoken", res.data.token);

                    //如果是对象/数组的话，需要先JSON.stringify转换成字符串
                    const encrypts = encryptDes(JSON.stringify(this.enrollmsg.user),this.$store.state.EBC);

                    // console.log('加密的秘钥'+this.$store.state.EBC)
                    this.$router.push({path:'/enrollview/succ', query:{username:encrypts}})

                }else {
                    // console.log("邮箱验证码获取失败");
                    this.$router.push('/')
                }

            }else {
                // 弹窗弹出的内容
                if(this.flagec==false&&this.flageu==false&&this.flagee==false){
                    this.enrollwarnmsg.popwarn='填写内容格式存在错误';
                }else if(this.flagec==false){
                    this.enrollwarnmsg.popwarn='填写账户名格式存在错误';
                }else if (this.flageu==false){
                    this.enrollwarnmsg.popwarn='填写密码格式存在错误';
                }else if (this.flagee==false){
                    this.enrollwarnmsg.popwarn='密码不一致';
                }
                // !!!!!弹窗显示！！！！！
                this.warnwindow(" ",this.enrollwarnmsg.popwarn)

            }
        },
//使警告的颜色变换为灰色
        changegrey(codemsgs){
            // 警告的变换正常
            document.querySelector('.'+codemsgs)
                .querySelector('i').style='background-position: -0px -100px;';
            document.querySelector('.'+codemsgs).style="display: flex;color: #999;";
        },
//使警告的颜色变换为红色
        changered(codemsgs){
            // 警告的颜色变换
            document.querySelector('.'+codemsgs).style='display: flex;color: #f91;';
            document.querySelector('.'+codemsgs)
                .querySelector("i").style='background-position: -17px -100px;';
        },
//检查账户名的事假
        checkenrollmsg(codemsg){
            if (codemsg=='enroll_QQ_warn'){
                const reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
                const msg=this.enrollmsg.user;
                if (reg.test(msg)){
                    //console.log("账户的名成格式+错误格式的数值="+msg)
                    // 变换灰色
                    this.changegrey(codemsg)
                    this.flagec=true;
                    this.enrollwarnmsg.userwarn='支持中文、英文、数字、“-”、“_”的组合';
                } else if (!reg.test(msg)){
                  //  console.log("账户的名成格式+错误格式的数值="+msg)
                    // 变换红色
                    this.changered(codemsg)
                    this.flagec=false;
                    this.enrollwarnmsg.userwarn='格式错误，仅支持汉字、字母、数字、“-”、“_”的组合'
                }else if (msg==''||msg==null){
                    //console.log("账户的名成格式+错误格式的数值="+msg)
                    // 变换红色
                    this.changered(codemsg)
                    this.flage=false;
                    this.enrollwarnmsg.userwarn='为空错误，仅支持汉字、字母、数字、“-”、“_”的组合'
                }
    //密码
            }else if(codemsg=='enroll_code_warn'){
                const regs = /^(?![a-zA-Z]+$)(?!\d+$)(?![^\da-zA-Z\s]+$).{1,9}$/;
                const msgs=this.enrollmsg.userpwd;
                if (msgs==''||msgs==null){
                    //console.log("账户的名成格式+错误格式的数值="+msgs)
                    // 变换灰色
                    this.changegrey(codemsg)
                    this.flageu=false;
                    document.querySelectorAll('.enroll_img_i')[0].style="display: none";
                    this.enrollwarnmsg.pwdwarn='格式错误，建议使用两种或两种以上字符组合';
                } else if (!regs.test(msgs)){
                    //console.log("账户的名成格式+错误格式的数值="+msgs)
                    // 变换红色
                    this.changered(codemsg)
                    this.flageu=false;
                    document.querySelectorAll('.enroll_img_i')[0].style="display: none";
                    this.enrollwarnmsg.pwdwarn='格式错误，建议使用两种或两种以上字符组合'
                }else if (regs.test(msgs)){
                    //console.log("账户的名成格式+错误格式的数值="+msgs)
                    // 变换灰色
                    this.changegrey(codemsg)
                    this.flageu=true;
                    document.querySelectorAll('.enroll_img_i')[0].style="display: block";
                    this.enrollwarnmsg.pwdwarn='建议使用字母、数字和符号两种及以上的组合，8-20个字符';
                }
    //确认密码
            }else if(codemsg=='enroll_exec_warn'){
                const msg=this.enrollmsg.userpwd
                const msgs=this.enrollmsg.execpwd;
                if (msgs==''||msgs==null){
                    //console.log("密码为空"+msgs)
                    // 变换灰色
                    this.changegrey(codemsg)
                    this.flagee=false;
                    document.querySelectorAll('.enroll_img_i')[1].style="display: none";
                    this.enrollwarnmsg.execpwdwarn='请再次输入密码';
                }else if (msg==''||msgs==null){
                    //console.log("请输入密码")
                    // 变换红色
                    document.querySelectorAll('.enroll_img_i')[1].style="display: none";
                    this.changered(codemsg)
                    this.flagee=false;
                    this.enrollwarnmsg.execpwdwarn='请输入密码'
                } else if (msg!=msgs){
                    //console.log("两次的密码不一致"+"确认密码"+msgs+"密码"+msg)
                    // 变换红色
                    document.querySelectorAll('.enroll_img_i')[1].style="display: none";
                    this.changered(codemsg)
                    this.flagee=false;
                    this.enrollwarnmsg.execpwdwarn='两次输入的密码不一致'
                }else if (msg==msgs){
                    //console.log("两次的密码一致="+msgs)
                    // 变换红色
                    document.querySelectorAll('.enroll_img_i')[1].style="display: block";
                    this.changegrey(codemsg)
                    this.flagee=true;
                    this.enrollwarnmsg.execpwdwarn='密码通过'
                }
            }

        },
//显示取消的按钮
        showwarnmsg(msg,flage,flages){
            // enroll_code_warn enroll_exec_warn enroll_QQ_warn
           // console.log('显示警告条'+msg+"是否"+flage+"错误"+flages);
            const warn='.'+msg
            if (flage==true){
                //console.log("获得焦点+显示+参数"+msg)
                document.querySelector(warn).querySelector('i').style='background-position: -0px -100px;';
                document.querySelector(warn).style="display: flex;";
                if (flages==false){
                    this. changered(msg);
                }
            }else if (flage==false){
                document.querySelector(warn).style="display: none;";
            }else {
             //   console.log("确认信息参数错误");
            }
        },

// 邮件悬浮触发事件
        showwarn(){
            //  验证完成后，可以用该邮箱进行登录或者找回密码
            document.querySelector('.enroll_QQ_warn').style="display: flex;";
        },
    },
    computed:{
        userwarnmsg:function (){
            return this.enrollwarnmsg.userwarn;
        },
        pwdwarnmsg:function (){
            return this.enrollwarnmsg.pwdwarn;
        },
        execpwdwarnmsg:function () {
            return this.enrollwarnmsg.execpwdwarn;
        },
        isleavef:function () {
            return this.isleave;
        }
    },
    created() {
    },
    mounted() {

         this.user.email=this.$route.query.email;
        console.log('邮箱的传递'+this.$route.query.email)

        // ------当前的样式-----------//
        document.querySelectorAll('.enroll_two')[0]
            .querySelector('span').style="background-position: 0 0;";
        document.querySelectorAll('.enroll_two')[0]
            .querySelector('span').innerHTML='';
        document.querySelectorAll('.enroll_two')[0]
            .querySelector('p').style=" color: #3b4";
        // ------当前的样式-----------//
        document.querySelectorAll('.enroll_dots')[0].style='background-position: 0 -130px;';

        document.querySelectorAll('.enroll_two')[1]
            .querySelector('span').style="background-position: 0 -200px;" +
            "color: #fff";
        document.querySelectorAll('.enroll_two')[1]
            .querySelector('p').style=" color: #3b4";
    },
    watch: {

    },
}
</script>

<style scoped>
.enroll_cent{
    width: 1260px;
    height: auto;
    min-height: 507px;
    /*居中设置*/
    margin: auto;
    margin-bottom: 100px;
}

/*---------中下侧------------注册的信息------*/
.enroll_cent .enroll_inputmsg{
    width: 400px;
    height: auto;

    margin: auto;
    display: inline-block;
}
/*---------每一个的输入邮箱和验证码的外部div容器--*/
.enroll_cent .enroll_inputmsg div{
    width: 400px;
    height: 86px;
    margin-top: 15px;
}

.enroll_cent .enroll_inputmsg div div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: auto;
    height: 52px;
    /*overflow: hidden;*/

    /*边框的线条*/
    border-color: rgb(221, 221, 221);
    border-style: solid;
    border-width: 1px;
}

/*-----提示信息-----------*/
.enroll_cent .enroll_inputmsg div label{
    width: 108px;
    font-size: 15px;
    color: #666;
}
/*输入框*/
.enroll_cent .enroll_inputmsg div input{
    width: 174px;
    height: 95%;
    color: rgb(204, 204, 204);

    /*输入框的左侧竖线   |   */
    border-color: rgb(221, 221, 221);
    /*border-color: darkorchid;*/
    border-style: solid;
    border-width: 0px;
    border-left-width: 1px;
    outline: none;
}
.enroll_cent .enroll_inputmsg span{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.enroll_cent .enroll_inputmsg .enroll_img_i{
    position: relative;
    float: right;
    right: -82px;
    width: 16px;
    height: 16px;
    background: url('@/assets/icon/icon.png') no-repeat;
    display: none;
    background-position: 0 -117px;
    /*background-color: blue;*/
}
/*注册地址的警告条*/
.enroll_cent .enroll_inputmsg span .enroll_img_w{
    display: block;
    width: 16px;
    height: 16px;
    background-position: -0px -100px;
    background-image: url("@/assets/icon/icon.png");
}
/*格式错误/验证完成后，可以用该邮箱进行登录或者找回密码*/
.enroll_cent .enroll_inputmsg div .enroll_QQ_warn{
    color: #999;
    font-size: 12px;
    display: none;
}
/*验证码已发送，120秒内输入有效*/
.enroll_cent .enroll_inputmsg div .enroll_code_warn{
    align-items: center;
    color: #999;
    font-size: 12px;
    display: none;
}
.enroll_cent .enroll_inputmsg div .enroll_exec_warn{
    align-items: center;
    color: #999;
    font-size: 12px;
    display: none;
}
.enroll_cent .enroll_inputmsg div div button{

    all: unset;
    width: 118px;
    height: 52px;
    border: 0px;
    cursor: pointer;
}
/*--------提交--button--*/
.enroll_cent .enroll_inputmsg .enroll_subimt input{
    color: #fff;
    background-color: #e2231a;
    width: 100%;
    cursor: pointer;
}
/*------企业用户登录------*/
.reg-other-person{
    margin-top: 25px;
    float: left;
}
.reg-other-person .reg-ohter-icon{
    display: inline-block;
    margin: 0 8px 2px 0;
    vertical-align: middle;
    width: 26px;
    height: 26px;
    background: url('@/assets/bckground/reg-icon.png') no-repeat;
    background-position: 0 -160px;
}
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*----------------*/
.enroll_cent .el-message--error{
    width: 300px;
    height: 40px;
    background-color: #faccc6;
    position: fixed;
    left:50%;
    top: -50px;
    transform:translate(-50%,0);
    z-index:1000;
    border-radius: 174px 174px 157px 157px / 150px 150px 135px 135px;
    display: block;
}
::v-deep #after{
    width: 232px;
    height: 46px;
    border-radius: 12px 12px 12px 12px;
    font-size: 13px;
    background-color: springgreen;
    color: #046e15;
    font-family: Arial;
}

</style>